<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<div class="topTitle font-bold main-color text-2xl">
				询价清单以及要求
			</div>
			<el-row>
				<el-col :span="5" class="mr-[30px] mt-[20px]">
					<div class="main-color v-flex-col">
						<span>客户ID：</span>
						<el-input class="flex-1 mt-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="5" class="mr-[30px] mt-[20px]">
					<div class="main-color v-flex-col">
						<span>报价编码：</span>
						<el-input class="flex-1 mt-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="5" class="mr-[30px] mt-[20px]">
					<div class="main-color v-flex-col">
						<span>询价日期：</span>
						<el-select placeholder="请选择" class="flex-1 mt-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
				<el-col :span="5" class="mr-[30px] mt-[20px]">
					<div class="main-color v-flex-col">
						<span>货物种类：</span>
						<el-select placeholder="请选择" class="flex-1 mt-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
				<el-col :span="5" class="mr-[30px] mt-[20px]">
					<div class="main-color v-flex-col">
						<span>运输方式：</span>
						<el-select placeholder="请选择" class="flex-1 mt-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
				<el-col :span="5" class="mr-[30px] mt-[20px]">
					<div class="main-color v-flex-col">
						<span>航线选择：</span>
						<el-select placeholder="请选择" class="flex-1 mt-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
				<el-col :span="5" class="mr-[30px] mt-[20px]">
					<div class="main-color v-flex-col">
						<span>起运港：</span>
						<el-input class="flex-1 mt-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="5" class="mr-[30px] mt-[20px]">
					<div class="main-color v-flex-col">
						<span>目的港：</span>
						<el-input class="flex-1 mt-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="5" class="mr-[30px] mt-[20px]">
					<div class="main-color v-flex-col">
						<span>报价条款：</span>
						<el-select placeholder="请选择" class="flex-1 mt-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
				<el-col :span="5" class="mr-[30px] mt-[20px]">
					<div class="main-color v-flex-col">
						<span>货物描述：</span>
						<el-input class="flex-1 mt-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="5" class="mr-[30px] mt-[20px]">
					<div class="main-color v-flex-col">
						<span>HS编码：</span>
						<el-input class="flex-1 mt-[10px]" placeholder="请输入"></el-input>
					</div>
				</el-col>
				<el-col :span="5" class="mr-[30px] mt-[20px]">
					<div class="main-color v-flex-col">
						<span>柜型选择：</span>
						<el-select placeholder="请选择" class="flex-1 mt-[10px]">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-card class="!border-none mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl">
				产品信息
			</div>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="产品编号" prop="scene_name" align="center">
					<template #default="{ row }">
						<span class="main-color">22222</span>
					</template>
				</el-table-column>
				<el-table-column label="产品名称" prop="询价单" align="center"  />
				<el-table-column label="总件数" prop="上海AAAA有限公司" align="center">
					<template #default="{ row }">
						<el-input  placeholder="请输入" />
					</template>
				</el-table-column>
				<el-table-column label="总毛重(kg)" prop="上海AAAA有限公司" align="center">
					<template #default="{ row }">
						<el-input  placeholder="请输入" />
					</template>
				</el-table-column>
				<el-table-column label="总体积(CBM)" prop="上海AAAA有限公司" align="center">
					<template #default="{ row }">
						<el-input  placeholder="请输入" />
					</template>
				</el-table-column>
				<el-table-column label="总托数" prop="上海AAAA有限公司" align="center">
					<template #default="{ row }">
						<el-input  placeholder="请输入" />
					</template>
				</el-table-column>
			</el-table>
			<el-row class="mt-[20px]">
				<el-col :span="3">
					<div class="main-color v-flex">
						<span>总件数：</span>
						<span class="v-wordBreak main-color1">623</span>
					</div>
				</el-col>
				<el-col :span="3" class="ml-[30px]">
					<div class="main-color v-flex">
						<span>总毛重(kg)：</span>
						<span class="v-wordBreak main-color1">623</span>
					</div>
				</el-col>
				<el-col :span="3" class="ml-[30px]">
					<div class="main-color v-flex">
						<span>总体积(CBM)：</span>
						<span class="v-wordBreak main-color1">623</span>
					</div>
				</el-col>
				<el-col :span="3" class="ml-[30px]">
					<div class="main-color v-flex">
						<span>总托数：</span>
						<span class="v-wordBreak main-color1">623</span>
					</div>
				</el-col>
			</el-row>
		</el-card>
		<el-row class="mt-[30px]">
			<el-button class="main-color1 w-[100px] h-[36px]" >取消</el-button>
			<el-button class="w-[100px] h-[36px]" color="#0054A6" type="primary">提交</el-button>
		</el-row>
	</div>
</template>

<script lang="ts" setup>
	const options = ref<Array<any>>([
		{
			value: '1',
			label: 'Metos/Sandvik/Extec/Symons'
		}, 
	])
	const lists = ref<Array<any>>([
		{}, {}, {}
	])
</script>

<style>
</style>